import { Card, Button } from 'antd';
import { useState } from 'react';

// 用于做语法解析的库
import MarkdownIt from 'markdown-it';
// 表示Md组件
import MdEditor from 'react-markdown-editor-lite';
// 导入编辑器的样式
import 'react-markdown-editor-lite/lib/index.css';

// 初始化Markdown解析器
const mdParser = new MarkdownIt(/* Markdown-it options */);

// 完成！
function handleEditorChange({ html, text }: any) {
  console.log('handleEditorChange', html, text);
}

const Index = () => {
  return (
    <Card>
      <MdEditor
        style={{ height: '500px' }}
        renderHTML={(text) => mdParser.render(text)}
        onChange={handleEditorChange}
      />
    </Card>
  );
};

export default Index;
